{% extends 'base/base.html' %}

{% load static %}
{% csrf_token %}

{% block title %}
<title>壁纸详情</title>
{% endblock %}


{% block body %}
<style>
    .row > .col-md-4,
    .row > .col-md-8 ,{
    border: 1px solid #000; /* 黑色边框，宽度为1px */
    padding: 15px; /* 添加一些内边距 */
}
    /* 默认的收藏按钮样式 */
.favorite-btn img {
    width: 24px; /* 或者你想要的任何大小 */
    height: 24px;
    /* 其他样式 */
}
    /* ...你的其他样式... */

    /* 收藏按钮样式 */
.favorite-btn.favorited img {
        /* 黄色图标样式 */
    }


</style>

<div class="row">
    <div class="col-md-4">
        <img src="/media/{{ book.preview_image }}" class="img-responsive" alt="Responsive image">
    </div>
    <div class="col-md-8">
        <a class="btn btn-success" href="{% url 'main:download' book.id %}" role="button">下载封面</a>
        <h2>作者 : {{ author_name }}</h2>
        <h3>简介 : {{ description }}</h3>
        <h3>下载次数 : {{ book.views }}</h3>
        <h3>收藏次数 : {{ book.favorite_count }}</h3>
        <button class="btn btn-primary" id="favorite-btn" data-book-id="{{ book.id }}">收藏</button>
    </div>

</div>

{% for at in ats %}
{% if at.book.title == book.title %}
<div class="col-md-4">
    <a class="" href="{% url 'main:article' book_id at.id %}" role="button"><h3>第{{ forloop.counter }}章 {{ at.title }}</h3></a>
</div>
{% endif %}
{% endfor %}

{% endblock %}


